<template>
  <div class="order-detail-container">
    <!-- 订单状态标签 -->
    <!-- 基本信息 -->
    <div class="info-section">
      <div class="section-title">
        基本信息
        <div class="order-status">
          {{ baseInfo.order_status[orderInfo.base_info.order_status] }}
        </div>
      </div>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="订单号">
          {{ orderInfo.base_info?.order_sn }}
        </el-descriptions-item>
        <el-descriptions-item label="结款状态">
          {{
            baseInfo.settle_payment_status[
              orderInfo.base_info?.settle_payment_status
            ]
          }}
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          {{ baseInfo.order_status[orderInfo.base_info.order_status] }}
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">
          {{ orderInfo.order_detail[0]?.create_time }}
        </el-descriptions-item>
        <el-descriptions-item label="订单金额">
          ￥{{ orderInfo.base_info.pay_amount }}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">
          {{ orderInfo.base_info.payment_method }}
        </el-descriptions-item>
        <el-descriptions-item label="店铺名称">
          {{ orderInfo.base_info.shop_name }}
        </el-descriptions-item>
        <el-descriptions-item label="店铺电话">
          {{ orderInfo.base_info.shop_mobile }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 配送信息 -->
    <div class="info-section">
      <div class="section-title">配送信息</div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="收货人">
          {{ orderInfo.distribution_info.consignee }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
          {{ orderInfo.distribution_info.consignee_mobile }}
        </el-descriptions-item>
        <el-descriptions-item label="收货地址" :span="2">
          {{ orderInfo.distribution_info.address }}
        </el-descriptions-item>
        <template v-if="orderInfo.distribution_info?.delivery_method_desc">
          <el-descriptions-item label="配送方式" :span="2">
            {{ orderInfo.distribution_info.delivery_method_desc }}
          </el-descriptions-item>
          <el-descriptions-item label="快递公司">
            {{ orderInfo.distribution_info.logistics_compan }}
          </el-descriptions-item>
          <el-descriptions-item label="物流单号">
            {{ orderInfo.distribution_info.logistics_no }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </div>

    <!-- 商品信息 -->
    <div class="info-section">
      <div class="section-title">商品信息</div>
      <el-table
        :data="orderInfo.order_detail"
        border
        style="width: 100%"
        :key="timer"
      >
        <el-table-column label="商品图片" width="180">
          <template #default="scope">
            <el-image
              style="width: 150px; height: 150px"
              :src="scope.row.goods_image"
              preview-teleported
              hide-on-click-modal
              :preview-src-list="[scope.row.goods_image]"
              fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column prop="brand_name" label="品牌" />
        <el-table-column prop="goods_name" label="商品名称" width="250" />
        <el-table-column
          prop="goods_spec_value_name"
          label="规格属性"
          width="250"
        />
        <el-table-column prop="unit" label="单位" width="90" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="price" label="价格">
          <template #default="scope" v-if="!isEditPrice">
            ￥{{ scope.row.price }}
          </template>
          <template #default="scope" v-else>
            <el-input-number
              v-model="scope.row.price"
              :min="0"
              :controls="false"
              class="quantity-input"
              @wheel.native.prevent="stopScroll($event)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="购买数量" />
        <el-table-column prop="total_price" label="总付金额">
          <template #default="scope">￥{{ scope.row.total_price }}</template>
        </el-table-column>
      </el-table>
      <div class="total-amount">
        实付金额：
        <span class="amount">￥{{ orderInfo.base_info?.pay_amount }}</span>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="button-container">
      <el-button @click="handleReturn">返回</el-button>
      <el-button
        type="primary"
        @click="handleEditPrice"
        v-if="!isEditPrice && orderInfo.base_info.order_status < 4"
      >
        编辑单价
      </el-button>
      <el-button type="primary" @click="handleSavePrice" v-if="isEditPrice">
        保存
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import {
    getSingleSalesInfo,
    getSingleSalesBaseInfo,
    editSingleSalesPrice,
  } from '@/api/single'
  import { stopScroll } from '@/utils/helper'
  import { message } from '@/utils/helper'

  const router = useRouter()
  const route = useRoute()

  // 订单信息数据
  const orderInfo: any = ref({
    base_info: {},
    distribution_info: {},
    order_detail: [],
  })
  const isEditPrice = ref(false)
  const timer = ref(new Date().getTime())
  const handleEditPrice = () => {
    isEditPrice.value = true
    timer.value = new Date().getTime()
  }

  const handleSavePrice = async () => {
    const res = await editSingleSalesPrice({
      id: orderInfo.value.base_info.id,
      order_detail: JSON.stringify(
        orderInfo.value.order_detail.map((item) => ({
          id: item.id,
          price: item.price,
          quantity: item.quantity,
        }))
      ),
    })
    message('保存成功')
    isEditPrice.value = false
    if (route.query.id) {
      getOrderDetailData(route.query.id)
    }
  }

  // 返回按钮处理函数
  const handleReturn = () => {
    router.back()
  }
  const getOrderDetailData = (id) => {
    getSingleSalesInfo({ id }).then((res) => {
      console.log(res)
      orderInfo.value = res.data
    })
  }
  const baseInfo: any = ref({
    order_status: {},
    pay_status: {},
    settle_payment_status: {},
  })
  const getOrderBaseInfoData = () => {
    getSingleSalesBaseInfo().then((res) => {
      baseInfo.value = res.data
    })
  }

  onMounted(() => {
    getOrderBaseInfoData()
    if (route.query.id) {
      getOrderDetailData(route.query.id)
    }
  })
</script>

<style lang="scss" scoped>
  .order-detail-container {
    padding: 20px;
    background: #f5f7fa;

    .order-status {
      position: absolute;
      top: 58px;
      right: 53px;
      color: #f56c6c;
      font-size: 20px;
      font-weight: bold;
    }

    .info-section {
      background: #fff;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .section-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
        padding-left: 10px;
        border-left: 4px solid #409eff;
      }
    }

    .total-amount {
      text-align: right;
      margin-top: 20px;
      font-size: 14px;

      .amount {
        color: #f56c6c;
        font-size: 20px;
        font-weight: bold;
      }
    }

    .button-container {
      text-align: center;
      margin-top: 20px;
    }
  }

  :deep(.el-descriptions__label) {
    width: 120px;
    text-align: right;
    font-weight: bold;
    background-color: #f5f7fa;
  }

  :deep(.el-descriptions__content) {
    padding: 12px;
  }

  :deep(.el-table) {
    margin-top: 20px;

    .el-table__header th {
      background-color: #f5f7fa;
      color: #606266;
    }
  }
</style>
